<template>
  <div>
    <HeaderView v-model="focusVisible"/>
  </div>
  <div class="box1">
    <el-table :data="goodslists" border fit style="width: 100%;margin: 35px 0;">
      <el-table-column align="center" label="商品名称" width="430px">
        <template #default="scope">
          <el-link :underline="false" @click="goToGoodsDetails(scope.row)">
            <el-image :src="scope.row.computerPath"/>
            <span style="text-align: start">{{ scope.row.computerName }}</span>
          </el-link>
        </template>
      </el-table-column>
      <el-table-column align="center" label="单价">
        <template #default="scope">
          <span>&yen; {{ scope.row.computerPrice }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="数量">
        <template #default="scope">
          <el-input v-model.number="scope.row.computerNum" min="1" oninput="value=value.replace(/[^\d]/g,'')"
                    size="small" type="number" @change="scope.row.computerNum"></el-input>
        </template>
      </el-table-column>
      <el-table-column align="center" label="小计">
        <template #default="scope">
          <span> &yen; {{ (scope.row.computerPrice * scope.row.computerNum) }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template #default="scope">
          <el-row>
            <el-button size="small" style="padding: 0 15px" @click="remove(scope.row)">删除</el-button>
          </el-row>
        </template>
      </el-table-column>
    </el-table>
    <div style="text-align: left;margin-bottom: 35px;">
      <span>共&nbsp;{{ totalNum }}&nbsp;件商品</span>
      <span style="color: #e28da2;padding: 0 15px">合计：&nbsp;{{ totalPrice }}&nbsp;元</span>
      <el-button style="background-color:#ffa500;color: black" type="danger" @click="goBuy">去结算</el-button>
    </div>
  </div>
  <div>
    <FooterView></FooterView>
  </div>
</template>
<script setup>
import HeaderView from '@/components/HeaderView.vue'
import {useRouter} from 'vue-router'
import FooterView from "@/components/FooterView.vue";
import {computed, reactive, ref} from 'vue'

const focusVisible = ref(true)
const router = useRouter()//相当于this.$router，一般具有功能性，例如路由跳转
console.log(router)
const goodslists = reactive([
  {
    computerid: 1,
    computerPath: require('../static/computer.png'),
    computerName: '【弹药库机箱】ROG/玩家国度 i5-13490/RTX4060华硕显卡GT502海景房华硕游戏DIY组装电脑主板DDR5旗舰店1',
    computerDescription: '价保服务，退货运费险，假一赔四，极速退款，7天无理由退换',
    computerPrice: 7999,
    computerNum: 1
  }
])
const goToGoodsDetails = (goods) => {
  router.push({name: 'goodsDetails', state: {data: JSON.stringify(goods)}})
}
const goBuy = () => {
  router.push({name: 'test'})
}

function remove() {
  confirm('确定要删除该商品吗？')
}

//使用计算属性计算数量
const totalNum = computed(() => {
  let total = 0
  for (let i = 0; i < goodslists.length; i++) {
    let item = goodslists[i]
    total = total + item.computerNum
  }
  return total
})
//使用计算属性计算总额
const totalPrice = computed(() => {
  let total = 0
  for (let i = 0; i < goodslists.length; i++) {
    let item = goodslists[i]
    total = total + item.computerPrice * item.computerNum
  }
  return total
})
</script>
<style scoped>
.box1 {
  text-align: center;
  width: 800px;
  margin: 0 auto;
}
</style>